<template>
<q-layout view="hHh Lpr fFf">
    <!-- Be sure to play with the Layout demo on docs -->

    <!-- (Optional) The Header -->
    <q-header reveal :class="isShow?'back-dark shadow-7':'transparent'">
        <q-toolbar class="transparent " style="width: 100%; height: 50px">
            <q-btn @click="handleBack" falt round icon="mdi-keyboard-backspace"></q-btn>
            <q-btn flat dense :class="isShow?'':'shadow-7'" icon="mdi-format-list-bulleted" @click="leftDrawer = !leftDrawer" />
            <div class="text-subtitle1">{{projectInfo.name}}</div>

            <q-space></q-space>
            <q-bar dark style="height: 50px" class="transparent">

                <q-space />

                <!-- <q-btn dense flat icon="close"><q-tooltip>关闭项目</q-tooltip></q-btn> -->
            </q-bar>
            <!-- <q-btn flat round dense icon="menu" class="mobile-only q-mr-sm" /> -->
        </q-toolbar>
    </q-header>

    <!-- (Optional) The Footer -->
    <q-footer v-model="isShow" class="row back-dark items-center shadow-up-7" style="height:40px">
        <q-btn flat round size="15px" dense icon="list" @click="leftDrawer = !leftDrawer" />
        <span class="text-caption">{{docMsg}}</span>

    </q-footer>

    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
    <q-drawer v-model="leftDrawer" :overlay="!$platform.inDesktop()" :width="300" :breakpoint="100" side="left" class="shadow-7" content-class="bg-dark " :behavior="!$platform.inDesktop()?'mobile':'default'">
        <!-- QScrollArea is optional -->
        <q-scroll-area style="height: calc(100% - 80px); margin-top: 80px" class="q-px-md ">

            <q-list class="text-teal-3">

                <q-item class="column q-mt-sm q-pa-none q-mb-sm shadow-7 " clickable v-for="item,index in docList" :key="index" :active="curDoc==item.doc_id" @click.stop="handleDocSelect(item)" v-ripple active-class="bg-teal-8 text-white">
                    <q-item-section :class="curDoc==item.doc_id?'':'bg-grey-9'">
                        <q-card class=" q-pa-sm bg-transparent  column item-center">
                            <tips-title lineColor="grey-6" :isPad="false" :title.sync="item.doc_name" tipStyle="height:40px" class="text-subtitle1" :isTitleEdit.sync="item.isTitleEdit" @click.native.stop="handleEditTitle(item)"></tips-title>
                            <div class="q-py-sm row items-center  justify-between ">
                                <div>
                                    <div>
                                        <q-icon class="q-mr-sm" name="mdi-clock-time-twelve-outline"></q-icon>{{ item.format_ctime }}
                                    </div>
                                    <!-- <div>
                                    <q-icon class="q-mr-sm" name="mdi-clock-outline"></q-icon>{{item.etime}}
                                </div> -->
                                </div>

                                <div class="row flex-center">
                                    <q-badge v-if="item.task_status==0" class="q-pa-sm" color="cyan-4">待开始</q-badge>
                                    <q-badge v-if="item.task_status==1" class="q-pa-sm" color="cyan-6">已完成</q-badge>
                                </div>
                            </div>

                        </q-card>
                    </q-item-section>

                    <!-- <q-item-section>
                    <q-badge>{{item.ctime}}</q-badge>
                </q-item-section>
                <q-item-section>{{item.taskname}}</q-item-section> -->
                </q-item>

                <q-separator />

            </q-list>

        </q-scroll-area>
        <q-card flat class="absolute-top transparent q-py-sm q-px-md q-mt-md" style="height: 80px">
            <div class="bg-transparent row justify-between">
                <div class="text-weight-bold text-h6">文案列表
                    <q-btn flat round size="15px" dense icon="mdi-unfold-more-vertical" @click="leftDrawer = !leftDrawer" />
                </div>
                <q-btn dense color="primary" outline icon="add" @click="handleAddDoc" label="新建"></q-btn>
            </div>
            <q-separator color="grey-7" class="q-my-md"></q-separator>
        </q-card>

    </q-drawer>
    <q-dialog v-model="isUploadDialog" persistent>
        <q-card class="bg-dark q-pa-none">
            <q-card-section class="row items-center q-pa-none">
                <div class="column">

                    <!-- <q-uploader
                  dark
                  url="http://localhost:4444/upload"
                  label="上传"
                  multiple
                  :headers="uploadheaders"
                  :form-fields="formfields"

                >
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">
                          将文件拖到此处，或<em>点击上传</em>
                      </div>
                      <div class="el-upload__tip" slot="tip">
                          上传文件类型：jpg文件
                      </div>
                  </q-uploader> -->
                </div>
            </q-card-section>

            <q-card-actions align="right">
                <!-- <q-btn outline label="上传文件" color="primary" @click="submitUpload" />
              <q-btn outline label="取消" color="primary" v-close-popup /> -->
            </q-card-actions>
        </q-card>
    </q-dialog>

    <q-page-container>

        <!-- This is where pages get injected -->
        <router-view ref="docContainer" :user="user" :isShow="isShow" :docMsg.sync="docMsg" />
    </q-page-container>

</q-layout>
</template>

<script>
import {
    customAlphabet
} from 'nanoid';
import {
    addDoc,
    loadDocList
} from "assets/api/studio/doc"
export default {

    data() {
        return {
            leftDrawer: true,
            pid: '',
            isUploadDialog: false,
            uploadheaders: {},
            docList: [],
            isFull: false,
            isShow: true,
            curDoc: '',
            docMsg: ''
        }
    },
    created() {
        this.pid = this.$route.params.pid;

        this.projectInfo = this.$store.state.projectinfo;
        this.i_name = setInterval(() => {
          this.projectInfo = this.$store.state.projectinfo;
            if (this.projectInfo.name) {
                document.title = this.projectInfo.name + '--文案';
                clearInterval(this.i_name)
            }

        }, 500);

        this.user = this.$store.state.user;
        this.handleLoadDocList()
    },
    mounted() {
        this.$emit('isSingle', true)
    },
    watch: {
        '$q.fullscreen.isActive'(val) {
            // if (val) {
            //     this.isShow = false;
            // } else {
            //     this.isShow = true;
            // }

            console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
        },

    },
    beforeDestroy() {
        this.$emit('isSingle', false)
    },
    methods: {
        handleAddDoc() {
            this.$q.loading.show()
            const nanoid = customAlphabet('123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz', 18);
            let doc_id = nanoid()
            let ctime = new Date().getTime()
            let format_ctime = this.$moment(ctime, 'x').calendar();
            let doc = {
                pid: this.pid,
                doc_id,
                doc_name: '未命名文档',
                isTitleEdit: false,
                content: '',
                ctime,
                format_ctime,
                version: 1
            }

            this.docList.push(doc);
            this.$refs.docContainer.doc = doc
            this.$refs.docContainer.loadDocEngine()
            this.$refs.docContainer.autoSave()
            this.curDoc = doc_id;
            this.$q.loading.hide()
            addDoc(doc).then(res => {
                console.log(res);
            })

        },

        handleDocSelect(item) {
            this.curDoc = item.doc_id
            this.$refs.docContainer.doc = item;
            this.$refs.docContainer.loadDocEngine()
            this.$refs.docContainer.autoSave()
            this.docMsg = ''
        },
        handleEditTitle(item) {
            console.log(item);
            item.isTitleEdit = true
        },
        handleBack() {
            this.$router.replace('/studio/' + this.pid)
        },
        handleLoadDocList() {
            loadDocList({
                pid: this.pid
            }).then(res => {
                console.log(res);
                if (res.data.code == 1) {
                    let data = res.data.data;
                    console.log(data);
                    data.forEach(i => {
                        i.format_ctime = this.$moment(i.ctime, 'x').calendar();
                        i.isTitleEdit = false
                    })
                    this.docList = data
                }
            })
        },
        handleMinWin() {
            // this.isShow = false;
            this.$q.fullscreen
                .exit()
                .then(() => {
                    // v1.5.0+
                    // success!
                })
                .catch((err) => {
                    // v1.5.0+
                    // oh, no!!!
                });
        },
        handleMaxWin() {
            // this.isShow = false;
            this.$q.fullscreen
                .request()
                .then(() => {
                    console.log(this.$refs);
                })
                .catch((err) => {
                    // v1.5.0+
                    // oh, no!!!
                });
        },
        handleUploadDialog() {
            this.isUploadDialog = true;
        }

    }
}
</script>
